import React from 'react';
import { Form, Card, Input, Button, Radio, InputNumber, Select, Switch, DatePicker, Upload, message, Icon, Checkbox } from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;

class Register extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      uploadImg: ''
    }
  }

  handleSubmit = () => {
    let userInfo = this.props.form.getFieldsValue();

    console.log(userInfo);
  }

  getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  handleChange(info){
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrl => this.setState({
        uploadImg: imageUrl,
        loading: false,
      }));
    }
  }

  render() {

    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: 24,
        sm: 4
      },
      wrapperCol: {
        xs: 24,
        sm: 12
      }
    };

    const offsetLayout = {
      wrapperCol: {
        xs: 24,
        sm: {
          span: 12,
          offset: 4
        }
      }
    }

    return (
      <div className="register-page">
        <Card title="注册表单">
          <Form layout="horizontal">
            <FormItem label="用户名" {...formItemLayout }>
              {
                getFieldDecorator('username', {
                  initialValue: '',
                  rules:[
                    {
                      required:true,
                      message: "用户名不能为空"
                    },{
                      pattern: RegExp('^\\w+$','g'),
                      message: '有字母数字组成'
                    }
                  ]
                })(
                  <Input autoComplete="off" type="text" placeholder="用户名" />
                )
              }
            </FormItem>
            <FormItem label="密码" {...formItemLayout }>
              {
                getFieldDecorator('password', {
                  initialValue: '',
                  rules:[
                    {
                      required:true,
                      message: "密码不能为空"
                    },{
                      pattern: RegExp('^\\w+$','g'),
                      message: '有字母数字组成'
                    }
                  ]
                })(
                  <Input autoComplete="off" type="password" placeholder="密码" />
                )
              }
            </FormItem>
            <FormItem label="性别" {...formItemLayout }>
              {
                getFieldDecorator('sex', {
                  initialValue: '1',
                })(
                  <RadioGroup>
                    <Radio value="1">男</Radio>
                    <Radio value="2">女</Radio>
                  </RadioGroup>
                )
              }
            </FormItem>
            <FormItem label="年龄" {...formItemLayout }>
              {
                getFieldDecorator('age', {
                  initialValue: 18,
                })(
                  <InputNumber />
                )
              }
            </FormItem>
            <FormItem label="身份" {...formItemLayout }>
            {
                getFieldDecorator('status', {
                  initialValue: "1",
                })(
                  <Select>
                    <Option value="1">鸡</Option>
                    <Option value="2">呀</Option>
                    <Option value="3">鱼</Option>
                    <Option value="4">狗</Option>
                    <Option value="5">额</Option>
                  </Select>
                )
              }
            </FormItem>
            <FormItem label="爱好" {...formItemLayout }>
            {
                getFieldDecorator('interest', {
                  initialValue: ["1","2","6"],
                })(
                  <Select mode="multiple">
                    <Option value="1">打篮球</Option>
                    <Option value="2">爬山</Option>
                    <Option value="3">钓鱼</Option>
                    <Option value="4">上网</Option>
                    <Option value="5">跑步</Option>
                    <Option value="6">唱歌</Option>
                    <Option value="7">汽车</Option>
                  </Select>
                )
              }
            </FormItem>

            <FormItem label="是否结婚" {...formItemLayout }>
            {
                getFieldDecorator('ismerried', {
                  valuePropName: 'checked',
                  initialValue: true,
                })(
                  <Switch> </Switch>
                )
              }
            </FormItem>

            <FormItem label="生日" {...formItemLayout }>
            {
                getFieldDecorator('birtyday', {
                  initialValue: moment(),
                })(
                  <DatePicker
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="时间选择"
                  />
                )
              }
            </FormItem>

            <FormItem label="地址" {...formItemLayout }>
            {
                getFieldDecorator('adress', {
                  initialValue: "安徽省安庆市",
                })(
                  <TextArea
                    autosize={{ minRows: 2, maxRows: 6 }}
                    placeholder="Autosize height with minimum and maximum number of lines"
                  />
                )
              }
            </FormItem>

            <FormItem label="上传" {...formItemLayout }>
            {
                getFieldDecorator('uploadimg', {

                })(
                  <Upload
                    showUploadList={false}
                    listType="picture-card"
                    action="//jsonplaceholder.typicode.com/posts/"
                    onChange={(info) => this.handleChange(info)}
                  >
                    {
                      this.state.uploadImg ? <img src={this.state.uploadImg} /> : <Icon type="plus"/>
                    }
                  </Upload>
                )
              }
            </FormItem>

            <FormItem {...offsetLayout }>
            {
                getFieldDecorator('checked', {
                  valuePropName: "checked",
                  initialValue: true,
                })(
                  <Checkbox>我已阅读本网站<a href="">协议</a></Checkbox>
                )
              }
            </FormItem>

            <FormItem {...offsetLayout }>
              <Button type="primary" onClick={this.handleSubmit}>注册</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    );
  }
}

export default Form.create()(Register);